<div id="uploadAlert">
	<el-upload
		action="{{$action_url}}"
		list-type="picture-card"
		ref="upload" multiple="true"
		:on-preview="Preview"
		:on-success="Success"
		name="file" :data="upData"
		:limit="limit" :on-exceed="Exceed"
		:before-upload="beforeUpload">
		<i class="el-icon-plus"></i>
	</el-upload>
	<el-dialog title="预览" :visible.sync="showImgPreview" append-to-body>
	  	<img width="100%" :src="upfile.previewImgUrl">
	</el-dialog>
</div>

<script type="text/javascript">
var uploadAlert = new Vue({
	el:"#uploadAlert",
	data:{
		showImgPreview:false,
		limit:5,
		upfile:{
			name:'test',
			previewImgUrl:'',
			ext:"jpg,png",
			sizeLimit:"20"
		},
		upData:{
			// targetpath:(string)
		}
	},
	methods:{
		Success(res,file) {
			this.upfile.previewImgUrl = res.data.path + "?r=" + Math.random();
			Main.upSuccess(res,file);
		},
		beforeUpload(file) {
			const isExt = this.upfile.ext.search(file.name.split('.')[file.name.split('.').length-1]) != -1;
			const isLtSize = file.size / 1024 / 1024 <= this.upfile.sizeLimit;
			if(!isExt){
				Main.$notify.error({
					title:'错误',
					message:"上传文件的格式不被允许"
				});
			}
			if(!isLtSize){
				Main.$notify.error({
					title:'错误',
					message:"上传文件大小超过限制,文件大小限制为" + this.upfile.sizeLimit
				});
			}
			return isExt && isLtSize;
		},
		Preview(file) {
			this.previewImgUrl = file.url;
        	this.showImgPreview = true;
		},
		Exceed() {
			Main.$notify.error({
				title:'错误',
				message:"上传文件数量超过限制,限制数量为" + this.limit
			});
		},
		clearFilesList(){
			this.is_show = false;
			this.$refs.upload.clearFiles();
		}
	}
})
</script>
